<!--族谱-->
<template>
	<div style="height: 1200px">
		<vue3-tree-org
			style="padding: 70px"
			center
			:data="data"
			:horizontal="horizontal"
			:collapsable="collapsable"
			:label-style="style"
			:node-draggable="true"
			:scalable="false"
			:only-one-node="onlyOneNode"
			:default-expand-level="1"
			:define-menus="diy_menu"
			:clone-node-drag="cloneNodeDrag"
			@on-contextmenu="onMenus"
			@on-node-click="onNodeClick"
			v-loading="dataListLoading"
		>
			<!-- 自定义节点内容 -->
			<template v-slot="{ node }">
				<div class="node-label">
					<el-image :src="'@/assets/R-C.jpg'" style="width: 50px; height: 50px; border: 1px solid #d3d3d340">
						<template #error>
							<div class="image-slot">
								<!-- /*图片加载失败显示的内容*/ -->
								<img src="@/assets/R-C.jpg" />
							</div>
						</template>
					</el-image>
					<div>{{ node.label }}</div>
				</div>
				<!--点击展示-->

				<!--添加一个浮动按键组-->
				<!--悬停-->
				<!--添加一个滑动抽屉-->
			</template>
			<!-- 自定义展开按钮 -->
			<template v-slot:expand="{ node }">
				<div>{{ node.children.length }}</div>
				<div>
					<svg-icon icon="icon-team" class="icon-div" className="icon-svg" size="34px" bColor="rgba(37, 97, 239, 1)" color="#FFFFFF"></svg-icon>
				</div>
			</template>
		</vue3-tree-org>
	</div>
</template>
<script setup lang="ts" name="ModuleOrganizationIndex">
import { ref } from 'vue'
import { ElMessage, MessageParamsWithType } from 'element-plus'
import service from '@/utils/request'

const diy_menu = (e: any, node: { disabled: any }) => {

	if (node.disabled) {
		return [
			{ name: '复制1', command: 'copy' },
			{ name: '自定义1', command: 'defind' }
		]
	} else {
		return [
			{ name: '复制2', command: 'copy' },
			{ name: '新建2', command: 'add' },
			{ name: '编辑2', command: 'edit' },
			{ name: '自定义2', command: 'defind' }
		]
	}
}

const data = ref({
	id: 1,
	label: '张床一',
	children: [
		{
			id: 2,
			pid: 1,
			label: '张前一',
			style: { color: '#fff', background: '#108ffe' },
			children: [
				{ id: 6, pid: 2, label: '张明一', disabled: true },
				{ id: 8, pid: 2, label: '张明二', noDragging: true },
				{ id: 10, pid: 2, label: '张明三' }
			]
		},
		{
			id: 3,
			pid: 1,
			label: '张前二',
			children: [
				{ id: 11, pid: 3, label: '张明甲' },
				{ id: 12, pid: 3, label: '张明已' }
			]
		},
		{ id: 4, pid: 1, label: '张前三' }
	]
})
const horizontal = ref(false)
const collapsable = ref(false)
const onlyOneNode = ref(true)
const cloneNodeDrag = ref(true)
const expandAll = ref(true)
const dataListLoading = ref(false)
const style = ref({
	background: '#fff',
	color: '#5e6d82'
})

const onMenus = (node: any, command: any) => {
	console.log('qqq',node, command)
}

const onNodeClick = (e: any, data: { label: MessageParamsWithType }) => {
	ElMessage.info(data.label)
}

const findListLeft = () => {
	dataListLoading.value = true
	service
		.get('/nb/organization/list', {
			params: {}
		})
		.then((res: any) => {
			data.value = res.data[0]
		})
		.finally(() => {
			dataListLoading.value = false
		})
}
findListLeft()

const color = ['', '', '', '']
</script>
<style lang="scss" scoped>
.tree-org-node__text {
	text-align: left;
	font-family: 'PingFangSC-Regular', 'PingFang SC';
	font-weight: 400;
	font-style: normal;
	width: 200px;

	.custom-content {
		padding: 8px 0;
		margin-top: 8px;
		border-top: 1px solid currentColor;
	}
}

.col-font {
	text-align: left;
	font-family: 'PingFangSC-Regular', 'PingFang SC';
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	color: #727272;
}
</style>
